<template>
  <div class="warehouse-container">
    
    
    <div class="search-section animate__animated animate__fadeInDown">
      <div class="search-left">
        <div class="input-group">
          <el-input 
            placeholder="请输入溯源码" 
            v-model="traceCode" 
            prefix-icon="el-icon-document"
            class="custom-input">
          </el-input>
          <el-input 
            placeholder="请输入商品ID" 
            v-model="productId" 
            prefix-icon="el-icon-goods"
            class="custom-input">
          </el-input>
          <el-input 
            placeholder="请输入商品名称" 
            v-model="productName" 
            prefix-icon="el-icon-goods"
            class="custom-input">
          </el-input>
        </div>
        <div class="button-group">
          <el-button type="primary" @click="search" class="action-btn search-btn">
            <i class="el-icon-search"></i> 搜索
          </el-button>
          <el-button type="warning" @click="reset" class="action-btn reset-btn">
            <i class="el-icon-refresh"></i> 重置
          </el-button>
          <el-button type="success" @click="showAddDialog" class="action-btn add-btn">
            <i class="el-icon-plus"></i> 添加仓库记录
          </el-button>
          <el-button type="danger" @click="batchDelete" class="action-btn delete-btn" :disabled="multipleSelection.length === 0">
            <i class="el-icon-delete"></i> 批量删除
          </el-button>
        </div>
      </div>
      
    </div>

    <div class="table-section animate__animated animate__fadeInUp">
      <el-table
          :data="tableData" border stripe
          :header-cell-style="getRowClass"
          @selection-change="handleSelectionChange"
          row-key="id"
          class="custom-table">
        
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column prop="warehouseId" label="仓库ID"></el-table-column>
        <el-table-column prop="traceCode" label="溯源码"></el-table-column>
        <el-table-column prop="productId" label="商品ID"></el-table-column>
        <el-table-column prop="productName" label="商品名称"></el-table-column>
        <el-table-column prop="amount" label="数量">
          <template slot-scope="scope">
            <el-input-number 
              v-model="scope.row.amount" 
              :min="0" 
              :precision="0"
              size="mini"
              @change="handleAmountChange(scope.row)"
              style="width: 100px;">
            </el-input-number>
          </template>
        </el-table-column>
        <el-table-column prop="currentTemperature" label="当前温度">
          <template slot-scope="scope">
            <span :style="{ color: getTemperatureColor(scope.row.currentTemperature) }">
              {{ scope.row.currentTemperature }}°C
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="sendDate" label="发货时间"></el-table-column>
        <el-table-column prop="recvDate" label="收货时间"></el-table-column>
        <el-table-column prop="status" label="状态">
          <template slot-scope="scope">
            <el-tag :type="getStatusType(scope.row.status)">
              {{ getStatusText(scope.row.status) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="380">
          <template slot-scope="scope">
            <div class="operation-buttons">
              <div class="button-row">
                <el-button size="mini" type="primary" class="operation-btn" @click="handleUpdateTemp(scope.row)">
                  <i class="el-icon-edit"></i> 更新温度
                </el-button>
                <el-button size="mini" type="success" class="operation-btn" @click="handleUpdateStock(scope.row)">
                  <i class="el-icon-goods"></i> 更新库存
                </el-button>
                <el-button size="mini" type="danger" class="operation-btn" @click="handleDelete(scope.row)">
                  <i class="el-icon-delete"></i> 删除
                </el-button>
              </div>
              <div class="button-row">
                <el-button size="mini" type="success" class="operation-btn" @click="handleSend(scope.row)" v-if="scope.row.status === '1'">
                  <i class="el-icon-s-promotion"></i> 发货
                </el-button>
                <el-button size="mini" type="warning" class="operation-btn" @click="handleReceive(scope.row)" v-if="scope.row.status === '2'">
                  <i class="el-icon-s-claim"></i> 收货
                </el-button>
                <el-button size="mini" type="info" class="operation-btn" @click="handleView(scope.row)">
                  <i class="el-icon-view"></i> 查看
                </el-button>
              </div>
            </div>
          </template>
        </el-table-column>
      </el-table>

      <div class="block" style="padding:10px 0;align-content: center;margin-left: 30%;margin-top:30px;">
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageNum"
            :page-sizes="[5, 10, 15, 20]"
            :page-size="10"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
        </el-pagination>
      </div>
    </div>

    <el-dialog title="添加仓库记录" :visible.sync="addDialogVisible" width="30%">
      <el-form :model="form" :rules="rules" ref="form" label-width="100px">
        <el-form-item label="商品ID" prop="productId">
          <el-input v-model="form.productId" @blur="handleProductIdChange"></el-input>
          <div class="form-tip">输入商品ID后将自动获取商品信息</div>
        </el-form-item>
        <el-form-item label="溯源码" prop="traceCode">
          <el-input v-model="form.traceCode" :disabled="form.productId"></el-input>
          <div class="form-tip" v-if="form.productId">从商品信息自动获取</div>
        </el-form-item>
        <el-form-item label="商品名称" prop="productName">
          <el-input v-model="form.productName" :disabled="form.productId"></el-input>
          <div class="form-tip" v-if="form.productId">从商品信息自动获取</div>
        </el-form-item>
        <el-form-item label="数量" prop="amount">
          <el-input-number v-model="form.amount" :min="1"></el-input-number>
        </el-form-item>
        <el-form-item label="初始温度" prop="currentTemperature">
          <el-input-number v-model="form.currentTemperature" :min="-50" :max="50"></el-input-number>
        </el-form-item>
        <el-form-item label="原产地" prop="origin">
          <el-input v-model="form.origin" :disabled="form.productId"></el-input>
          <div class="form-tip" v-if="form.productId">从商品信息自动获取</div>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleAdd">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog title="更新温度" :visible.sync="tempDialogVisible" width="30%">
      <el-form :model="tempForm" :rules="tempRules" ref="tempForm" label-width="100px">
        <el-form-item label="仓库ID" prop="warehouseId">
          <el-input v-model="tempForm.warehouseId" disabled></el-input>
        </el-form-item>
        <el-form-item label="当前温度" prop="currentTemperature">
          <el-input-number v-model="tempForm.currentTemperature" :min="-50" :max="50"></el-input-number>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="tempDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleTempSave">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog title="仓库详情" :visible.sync="viewDialogVisible" width="50%">
      <el-descriptions :column="2" border>
        <el-descriptions-item label="仓库ID">{{ viewData.warehouseId }}</el-descriptions-item>
        <el-descriptions-item label="溯源码">{{ viewData.traceCode }}</el-descriptions-item>
        <el-descriptions-item label="商品ID">{{ viewData.productId }}</el-descriptions-item>
        <el-descriptions-item label="商品名称">{{ viewData.productName }}</el-descriptions-item>
        <el-descriptions-item label="数量">{{ viewData.amount }}</el-descriptions-item>
        <el-descriptions-item label="当前温度">
          <span :style="{ color: getTemperatureColor(viewData.currentTemperature) }">
            {{ viewData.currentTemperature }}°C
          </span>
        </el-descriptions-item>
        <el-descriptions-item label="发货时间">{{ viewData.sendDate }}</el-descriptions-item>
        <el-descriptions-item label="收货时间">{{ viewData.recvDate }}</el-descriptions-item>
        <el-descriptions-item label="状态">
          <el-tag :type="getStatusType(viewData.status)">
            {{ getStatusText(viewData.status) }}
          </el-tag>
        </el-descriptions-item>
      </el-descriptions>
      <div slot="footer" class="dialog-footer">
        <el-button @click="viewDialogVisible = false">关 闭</el-button>
      </div>
    </el-dialog>

    <!-- 库存更新对话框 -->
    <el-dialog title="更新库存" :visible.sync="stockDialogVisible" width="30%">
      <el-form :model="stockForm" :rules="stockRules" ref="stockForm" label-width="100px">
        <el-form-item label="商品ID" prop="productId">
          <el-input v-model="stockForm.productId" disabled></el-input>
        </el-form-item>
        <el-form-item label="商品名称" prop="productName">
          <el-input v-model="stockForm.productName" disabled></el-input>
        </el-form-item>
        <el-form-item label="当前库存量" prop="currentStock">
          <el-input v-model="stockForm.currentStock" disabled></el-input>
        </el-form-item>
        <el-form-item label="新库存量" prop="newStock">
          <el-input-number v-model="stockForm.newStock" :min="0" :precision="0"></el-input-number>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="stockDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="updateStock">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import 'animate.css/animate.min.css';

export default {
  name: "Warehouse",
  data() {
    return {
      pageSize: 10,
      pageNum: 1,
      traceCode: '',
      productId: '',
      productName: '',
      tableData: [],
      addDialogVisible: false,
      tempDialogVisible: false,
      viewDialogVisible: false,
      stockDialogVisible: false,
      form: {
        traceCode: '',
        productId: '',
        productName: '',
        amount: 1,
        currentTemperature: 0,
        origin: '',
        status: '1'
      },
      tempForm: {
        warehouseId: '',
        currentTemperature: 0
      },
      stockForm: {
        productId: '',
        productName: '',
        currentStock: 0,
        newStock: 0
      },
      viewData: {},
      multipleSelection: [],
      total: 0,
      rules: {
        traceCode: [
          { required: true, message: '请输入溯源码', trigger: 'blur' }
        ],
        productId: [
          { required: true, message: '请输入商品ID', trigger: 'blur' }
        ],
        productName: [
          { required: true, message: '请输入商品名称', trigger: 'blur' }
        ],
        amount: [
          { required: true, message: '请输入数量', trigger: 'blur' }
        ],
        currentTemperature: [
          { required: true, message: '请输入温度', trigger: 'blur' }
        ]
      },
      tempRules: {
        currentTemperature: [
          { required: true, message: '请输入温度', trigger: 'blur' }
        ]
      },
      stockRules: {
        newStock: [
          { required: true, message: '请输入新库存量', trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    this.loadProductAndWarehouse();
  },
  methods: {
    loadProductAndWarehouse() {
      // 先加载所有商品信息
      this.request.get("/product/list").then(productRes => {
        if (productRes.code === '200' && Array.isArray(productRes.data)) {
          const products = productRes.data;
          
          // 然后加载仓库信息
          this.request.get("/warehouse/findAll").then(res => {
            if (res.code === '200') {
              let data = res.data;
              
              // 为没有productId的记录进行匹配
              data.forEach(warehouse => {
                if (!warehouse.productId && warehouse.traceCode) {
                  // 尝试用traceCode匹配商品
                  const matchedProduct = products.find(product => 
                    product.traceCode === warehouse.traceCode
                  );
                  if (matchedProduct) {
                    warehouse.productId = matchedProduct.productId;
                    // 更新仓库记录的productId
                    this.updateWarehouseProductId(warehouse.warehouseId, matchedProduct.productId);
                  }
                }
              });
              
              // 根据搜索条件过滤
              if (this.traceCode) {
                data = data.filter(item => item.traceCode && item.traceCode.includes(this.traceCode));
              }
              if (this.productId) {
                data = data.filter(item => item.productId && item.productId.toString().includes(this.productId));
              }
              if (this.productName) {
                data = data.filter(item => item.productName && item.productName.includes(this.productName));
              }
              this.tableData = data;
              this.total = data.length;
            }
          });
        }
      });
    },
    load() {
      this.loadProductAndWarehouse();
    },
    // 更新仓库记录的商品ID
    updateWarehouseProductId(warehouseId, productId) {
      this.request.put(`/warehouse/updateProductId/${warehouseId}`, {
        productId: productId
      }).then(res => {
        if (res.code === '200') {
          console.log(`成功更新仓库记录${warehouseId}的商品ID为${productId}`);
        } else {
          console.error(`更新仓库记录商品ID失败: ${res.msg}`);
        }
      }).catch(err => {
        console.error('更新仓库记录商品ID出错:', err);
      });
    },
    getRowClass({rowIndex, columnIndex}) {
      if(rowIndex === 0) {
        return 'background:#ccc'
      }
    },
    reset() {
      this.traceCode = '';
      this.productId = '';
      this.productName = '';
      this.load();
    },
    search() {
      this.load();
    },
    // 处理商品ID变化，自动获取商品信息
    handleProductIdChange() {
      if (!this.form.productId) {
        // 如果清空了商品ID，重置表单相关字段
        this.form.traceCode = '';
        this.form.productName = '';
        this.form.origin = '';
        return;
      }
      
      // 检查ID是否为数字
      if (!/^\d+$/.test(this.form.productId)) {
        this.$message.error('商品ID必须是数字');
        this.form.productId = '';
        return;
      }
      
      // 获取商品信息
      this.request.get(`/warehouse/getProductInfo/${this.form.productId}`).then(res => {
        if (res.code === '200' && res.data) {
          const product = res.data;
          console.log('获取到商品信息:', product);
          
          // 自动填充表单
          this.form.traceCode = product.traceCode || '';
          this.form.productName = product.name || '';
          this.form.origin = product.origin || '';
          
          // 如果有温度信息，设置初始温度为推荐温度的中间值
          if (product.minTemp !== undefined && product.maxTemp !== undefined) {
            this.form.currentTemperature = Math.floor((product.minTemp + product.maxTemp) / 2);
          }
          
          this.$message.success('商品信息获取成功');
        } else {
          this.$message.error(res.msg || '商品不存在');
          // 清空商品ID和相关字段
          this.form.productId = '';
          this.form.traceCode = '';
          this.form.productName = '';
          this.form.origin = '';
        }
      }).catch(err => {
        console.error('获取商品信息出错:', err);
        this.$message.error('获取商品信息失败');
        this.form.productId = '';
      });
    },
    showAddDialog() {
      this.form = {
        traceCode: '',
        productId: '',
        productName: '',
        amount: 1,
        currentTemperature: 0,
        origin: '',
        status: '1'
      };
      this.addDialogVisible = true;
    },
    handleAdd() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.request.post("/warehouse/save", this.form).then(res => {
            if (res.code === '200') {
              this.$message.success('添加成功');
              this.addDialogVisible = false;
              this.load();
            } else {
              this.$message.error(res.msg);
            }
          });
        }
      });
    },
    handleUpdateTemp(row) {
      this.tempForm = {
        warehouseId: row.warehouseId,
        currentTemperature: row.currentTemperature
      };
      this.tempDialogVisible = true;
    },
    handleTempSave() {
      this.$refs.tempForm.validate((valid) => {
        if (valid) {
          this.request.put("/warehouse/updateTemperature/" + this.tempForm.warehouseId, {
            temperature: this.tempForm.currentTemperature
          }).then(res => {
            if (res.code === '200') {
              this.$message.success('温度更新成功');
              this.tempDialogVisible = false;
              this.load();
            } else {
              this.$message.error(res.msg);
            }
          });
        }
      });
    },
    handleSend(row) {
      this.$confirm('确认发货?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.request.put("/warehouse/updateSendDate/" + row.warehouseId, {
          sendDate: new Date().toLocaleString(),
          status: '2'
        }).then(res => {
          if (res.code === '200') {
            this.$message.success('发货成功');
            this.load();
          } else {
            this.$message.error(res.msg);
          }
        });
      });
    },
    handleReceive(row) {
      this.$confirm('确认收货?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.request.put("/warehouse/updateRecvDate/" + row.warehouseId, {
          recvDate: new Date().toLocaleString(),
          status: '3'
        }).then(res => {
          if (res.code === '200') {
            this.$message.success('收货成功');
            this.load();
          } else {
            this.$message.error(res.msg);
          }
        });
      });
    },
    handleView(row) {
      this.viewData = JSON.parse(JSON.stringify(row));
      this.viewDialogVisible = true;
    },
    getTemperatureColor(temp) {
      if (temp > 30) return '#F56C6C';
      if (temp < 0) return '#409EFF';
      return '#67C23A';
    },
    getStatusType(status) {
      switch (status) {
        case '1': return 'primary';
        case '2': return 'warning';
        case '3': return 'success';
        default: return 'info';
      }
    },
    getStatusText(status) {
      switch (status) {
        case '1': return '待发货';
        case '2': return '已发货';
        case '3': return '已收货';
        default: return '未知';
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.load();
    },
    handleCurrentChange(val) {
      this.pageNum = val;
      this.load();
    },
    // 处理更新库存按钮点击
    handleUpdateStock(row) {
      this.stockForm = {
        productId: row.productId,
        productName: row.productName,
        currentStock: row.amount,
        newStock: row.amount
      };
      this.stockDialogVisible = true;
    },
    // 处理库存数量变化
    handleAmountChange(row) {
      const amount = row.amount;
      console.log('更新库存, 商品ID:', row.productId, '追溯码:', row.traceCode, '新库存:', amount);
      
      // 确保库存量是有效数字
      if (amount === null || amount === undefined || isNaN(amount)) {
        this.$message.error('请输入有效的库存数量');
        return;
      }
      
      // 转换为两位小数的数值
      amount = parseFloat(amount).toFixed(2);
      
      // 根据productId更新库存（如果productId不存在则使用traceCode）
      const updateId = row.productId ? row.productId.toString() : row.traceCode;
      
      // 发送更新库存请求
      this.request({
        url: `/warehouse/updateStock/${updateId}`,
        method: 'put',
        data: { amount: amount }
      }).then(res => {
        if (res.code === '200') {
          this.$message.success('库存更新成功');
          this.stockDialogVisible = false;
          this.load();
        } else {
          this.$message.error(res.msg || '库存更新失败');
        }
      }).catch(err => {
        console.error('库存更新请求错误:', err);
        this.$message.error('库存更新失败，请检查网络或服务器状态');
      });
    },
    // 在对话框中更新库存量
    updateStock() {
      if (this.currentProduct) {
        const { traceCode, productId } = this.currentProduct;
        const amount = this.stockForm.amount;
        
        console.log('对话框中更新库存 - 商品ID:', productId, '追溯码:', traceCode, '新库存:', amount);
        
        // 确保库存量是有效数字
        if (amount === null || amount === undefined || isNaN(amount)) {
          this.$message.error('请输入有效的库存数量');
          return;
        }
        
        // 转换为两位小数的数值
        const formattedAmount = parseFloat(amount).toFixed(2);
        
        // 根据productId更新库存（如果productId不存在则使用traceCode）
        const updateId = productId ? productId.toString() : traceCode;
        
        // 发送更新库存请求
        this.request({
          url: `/warehouse/updateStock/${updateId}`,
          method: 'put',
          data: { amount: formattedAmount }
        }).then(res => {
          console.log('对话框库存更新响应:', JSON.stringify(res));
          if (res.code === '200') {
            this.$message.success('库存更新成功');
            this.stockDialogVisible = false;
            this.load(); // 刷新列表
          } else {
            this.$message.error(res.msg || '库存更新失败');
          }
        }).catch(err => {
          console.error('对话框库存更新错误:', err);
          this.$message.error('更新库存时发生错误');
        });
      }
    },
    // 处理删除操作
    handleDelete(row) {
      this.$confirm('确认删除该库存记录吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.request.delete(`/warehouse/delete/${row.warehouseId}`).then(res => {
          if (res.code === '200') {
            this.$message.success('删除成功');
            this.load(); // 重新加载数据
          } else {
            this.$message.error(res.msg || '删除失败');
          }
        }).catch(err => {
          console.error('删除失败:', err);
          this.$message.error('删除失败，请检查网络或服务器状态');
        });
      }).catch(() => {
        this.$message.info('已取消删除');
      });
    },
    batchDelete() {
      this.$confirm('确认批量删除选中的仓库记录吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const ids = this.multipleSelection.map(item => item.warehouseId);
        this.request.delete(`/warehouse/deleteBatch`, { data: { ids } }).then(res => {
          if (res.code === '200') {
            this.$message.success('批量删除成功');
            this.load();
          } else {
            this.$message.error(res.msg || '批量删除失败');
          }
        }).catch(err => {
          console.error('批量删除失败:', err);
          this.$message.error('批量删除失败，请检查网络或服务器状态');
        });
      }).catch(() => {
        this.$message.info('已取消批量删除');
      });
    }
  }
}
</script>

<style scoped>
.warehouse-container {
  padding: 20px;
  background-color: #f5f7fa;
  min-height: 100vh;
}

.search-section {
  margin-bottom: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #fff;
  padding: 25px;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.05);
  transition: all 0.3s ease;
}

.search-section:hover {
  box-shadow: 0 6px 24px rgba(0,0,0,0.08);
}

.search-left {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
}

.input-group {
  display: flex;
  gap: 15px;
  flex-wrap: wrap;
}

.custom-input {
  width: 220px;
}

.custom-input :deep(.el-input__inner) {
  border-radius: 8px;
  border: 1px solid #dcdfe6;
  transition: all 0.3s ease;
}

.custom-input :deep(.el-input__inner:hover) {
  border-color: #409EFF;
}

.custom-input :deep(.el-input__inner:focus) {
  border-color: #409EFF;
  box-shadow: 0 0 0 2px rgba(64,158,255,0.1);
}

.button-group {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.action-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 20px;
  border-radius: 8px;
  font-weight: 500;
  transition: all 0.3s ease;
  border: none;
  position: relative;
  overflow: hidden;
}

.action-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(45deg, transparent, rgba(255,255,255,0.2), transparent);
  transform: translateX(-100%);
  transition: 0.5s;
}

.action-btn:hover::before {
  transform: translateX(100%);
}

.action-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.table-section {
  background: #fff;
  padding: 25px;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.05);
  transition: all 0.3s ease;
}

.table-section:hover {
  box-shadow: 0 6px 24px rgba(0,0,0,0.08);
}

.custom-table {
  margin-top: 20px;
}

.custom-table :deep(.el-table__header-wrapper) {
  background-color: #f5f7fa;
}

.custom-table :deep(.el-table__header th) {
  background-color: #f5f7fa;
  color: #606266;
  font-weight: 600;
  padding: 12px 0;
}

.custom-table :deep(.el-table__row) {
  transition: all 0.3s ease;
}

.custom-table :deep(.el-table__row:hover) {
  background-color: #f5f7fa !important;
}

.operation-buttons {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.button-row {
  display: flex;
  gap: 8px;
  justify-content: flex-start;
}

.operation-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  border-radius: 6px;
  transition: all 0.3s ease;
  border: none;
  font-weight: 500;
}

.operation-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.el-table {
  margin-top: 20px;
}

.dialog-footer {
  text-align: right;
  margin-top: 20px;
}

.el-descriptions {
  margin: 20px 0;
}

.form-tip {
  font-size: 0.8em;
  color: #909399;
  margin-top: 5px;
}

/* 按钮图标样式 */
.el-button i {
  margin-right: 4px;
  font-size: 16px;
}

/* 分页样式 */
.block {
  margin-top: 30px;
  display: flex;
  justify-content: center;
}

/* 响应式布局 */
@media screen and (max-width: 1200px) {
  .search-left {
    flex-direction: column;
    align-items: stretch;
  }
  
  .input-group {
    flex-direction: column;
  }
  
  .custom-input {
    width: 100%;
  }
  
  .button-group {
    margin-left: 0;
    margin-top: 10px;
    flex-wrap: wrap;
  }
  
  .action-btn {
    flex: 1;
    min-width: 120px;
  }
}

/* 动画效果 */
.animate__animated {
  animation-duration: 0.5s;
  animation-fill-mode: both;
}

.animate__fadeInDown {
  animation-name: fadeInDown;
}

.animate__fadeInUp {
  animation-name: fadeInUp;
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translate3d(0, -20px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translate3d(0, 20px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}
</style>
